<template>
  <view class="main">
    <view class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <image :src="item.url" mode="aspectFill" />
        </van-swipe-item>
      </van-swipe>
    </view>
    <view class="search">
      <van-search
        v-model="seacherKey"
        @click="$goUrl(`/pages/index/pages/search?type=1`)"
        background="transparent"
        placeholder="搜索"
        shape="round"
      />
    </view>
    <view class="option">
      <view
        class="option-item dispaly-just-between"
        v-for="(item, index) in CIRCLE_OPTION"
        :key="item.type"
        @click="clickOption(item)"
      >
        <view class="op-left dispaly-center">
          <view class="op-icon">
            <!-- <img
              style="width: 20px; height: 20px"
              :src="item.icon"
              mode="widthFix"
              alt=""
            /> -->
            <image :src="item.icon" mode="widthFix" />
          </view>
          <view class="op-name">{{ item.name }}</view>
        </view>
        <view class="op-right">
          <van-icon name="arrow" color="#0753FD" />
        </view>
      </view>
    </view>
    <view class="more">
      <view class="title-block dispaly-center">
        <view class="title-line"></view>
        <view class="title-text"
          >我发起的圈子（{{ circleData?.length || 0 }}）</view
        >
      </view>
      <view class="list">
        <template v-if="circleData?.length">
          <view
            class="list-item"
            v-for="(item, index) in circleData"
            :key="index"
            @click="$goUrl(`/pages/circle/pages/groupConsole?id=${item?.id}`)"
          >
            <searchCardOne :item="item" type="1" />
          </view>
        </template>
        <view v-else class="dispaly-align-center" style="margin-top: 30rpx"
          >暂无</view
        >
      </view>
    </view>
    <view class="more">
      <view class="title-block dispaly-center">
        <view class="title-line"></view>
        <view class="title-text"
          >我参与的圈子（{{
            joinCirclePageData && joinCirclePageData.length
              ? joinCirclePageData.length
              : 0
          }}）</view
        >
      </view>
      <view class="list">
        <template v-if="joinCirclePageData?.length">
          <view
            class="list-item"
            v-for="(item, index) in joinCirclePageData"
            :key="index"
          >
            <searchCardOne :item="item" type="2" />
          </view>
        </template>
        <view v-else class="dispaly-align-center" style="margin-top: 30rpx"
          >暂无</view
        >
      </view>
    </view>
  </view>

  <view
    class="carete-circle"
    @click="$goUrl(`/pages/index/pages/createCicle`)"
    v-if="config == 1"
  >
    <!-- <view class="circle-w dispaly-align-center">
      <view class="circle-n dispaly-align-center">
        <view>
          <view class="circle-text">圈子</view>
          <view class="circle-text">创建</view>
        </view>
      </view>
    </view> -->
  </view>

  <view
    class="carete-circle act"
    @click="$goUrl(`/pages/circle/pages/recommendedArticle`)"
    v-if="config == 1"
  >
    <view class="circle-w dispaly-align-center">
      <view class="circle-n dispaly-align-center">
        <view>
          <view class="circle-text">推荐</view>
          <view class="circle-text">文章</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { CIRCLE_OPTION } from "@/config/base";
import searchCardOne from "@/components/searchCardOne/searchCardOne.vue";
import { getCirclePage, joinCirclePage, banner, proxy } from "@/api/apiList";
import { onShow } from "@dcloudio/uni-app";

const config = ref({});
const getTopData = async () => {
  const res = await proxy("shortcutButton");
  if (res.code == 200) {
    config.value = res.data.shortcutButton;
  }
};
getTopData();

const bannerList = ref([]);
const getBanner = async () => {
  const res = await banner();
  if (res.code == 200) {
    bannerList.value = res.data;
  }
};
getBanner();

// 点击option
const clickOption = (item) => {
  if (item.path) {
    uni.navigateTo({
      url: item.path,
    });
  } else {
    uni.showToast({
      title: "该功能未开启",
      icon: "none",
    });
  }
};

const circleData = ref();
const circlePageDataChange = async () => {
  const response = await getCirclePage();
  console.log(response);
  if (response && response?.code == 200) {
    circleData.value = response?.data;
  }
};

const joinCirclePageData = ref();
const joinCirclePageChange = async () => {
  const response = await joinCirclePage();
  console.log(response);
  if (response && response?.code == 200) {
    joinCirclePageData.value = response?.data;
  }
};
onShow(() => {
  joinCirclePageChange();
  circlePageDataChange();
});
</script>

<style lang="scss" scoped>
:deep(.van-search__content--round) {
  background-color: #fff;
}

:deep(.van-search) {
  padding: 0;
}

.main {
  padding: 30rpx;

  .banner {
    image {
      width: 100%;
      height: 284rpx;
      border-radius: 16rpx;
    }
  }

  .search {
    margin: 30rpx 0;
  }

  .title-block {
    .title-line {
      width: 6rpx;
      height: 24rpx;
      border-radius: 20rpx;
      background: #0753fd;
      margin-right: 12rpx;
    }

    .title-text {
      font-family: PingFang SC Bold;
      font-size: 26rpx;
      font-weight: normal;
      color: #111111;
    }
  }

  .option {
    .option-item {
      background-color: #fff;
      padding: 36rpx 30rpx;
      border-radius: 16rpx;
      margin-bottom: 16rpx;

      .op-left {
        .op-icon {
          margin-right: 20rpx;

          image {
            width: 44rpx;
            height: 44rpx;
          }
        }

        .op-name {
          font-family: PingFang SC Medium;
          font-size: 28rpx;
          font-weight: normal;
          color: #111111;
        }
      }
    }
  }
}

.more:last-child {
  margin-bottom: 0;
}

.more {
  margin-bottom: 30rpx;

  .list {
    margin-top: 20rpx;

    .list-item:last-child {
      margin-bottom: 0;
    }

    .list-item {
      margin-bottom: 10rpx;
    }
  }
}

.act {
  bottom: 260rpx !important;
}

.carete-circle {
  position: fixed;
  right: 20rpx;
  bottom: 122rpx;

  .circle-w {
    width: 110rpx;
    height: 110rpx;
    box-sizing: border-box;
    border: 4rpx solid #111111;
    border-radius: 50%;

    .circle-n {
      background-color: #0753fd;
      width: 90rpx;
      height: 90rpx;
      border-radius: 50rpx;

      .circle-text {
        font-family: PingFang SC Regular;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
  }
}
</style>
